import React from "react";
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom'

class TabBarComp extends React.Component {
  constructor(props) {
    super(props);
    
    let pn = this.props.history.location.pathname
    let currentTab = '/'
    if (pn == '/me') {
      currentTab = 'meTab'      
    }else if(pn == '/'){
      currentTab = 'indexTab'
    }else{
      currentTab = '/'
    }
    this.state = {
      selectedTab: currentTab,
      hidden: false,
      fullScreen: true,
    };
  }

  renderContent() {
    return (
      <div></div>
    );
  }

  gotoPath(key) {
    this.props.history.push('/' + key)
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '50px', width: '100%', bottom: 0, zIndex: 1000 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#cdcdcd"
          tintColor="#b05923"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${require('@/icons/index.png').default}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${require('@/icons/index_on.png').default}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'indexTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'indexTab',
              });
              this.gotoPath('')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('@/icons/me.png').default}) center center /  21px 21px no-repeat`
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${require('@/icons/me_on.png').default}) center center /  21px 21px no-repeat`
              }}
              />
            }
            title="我"
            key="me"
            selected={this.state.selectedTab === 'meTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'meTab',
              });
              this.gotoPath('me')
            }}
          >
            {this.renderContent('Koubei')}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(TabBarComp);
